<template>
    <a-modal  :width='600'
    :title='modalProps.title'
    :visible="visible"
    @ok="handleOk"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    >
    <a-row>
      <a-form  :form='form'  >
        <a-col  :span='12'>
            <a-form-item label='上级菜单'  :label-col="formitem.LabeCol"  :wrapper-col='formitem.WrapperCol'>
                <a-select     v-decorator="['parentId',baseInit.parentId]">
                  <a-select-option   v-for='item in parentMenu'  :key='item.id' >{{item.name}}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label='名称'  :label-col="formitem.LabeCol"  :wrapper-col='formitem.WrapperCol'>
                <a-input    v-decorator="['name',baseInit.name]"/>
            </a-form-item>
            <a-form-item label='菜单与否'  :label-col="formitem.LabeCol"  :wrapper-col='formitem.WrapperCol'>
                <a-radio-group   v-decorator="['isMenu',baseInit.isMenu]"  >
                  <a-radio value="1">是</a-radio>
                  <a-radio value="0">否</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label='菜单排序'  :label-col="formitem.LabeCol"  :wrapper-col='formitem.WrapperCol'>
                <a-input    v-decorator="['sort',baseInit.sort]"  type='number'/>
            </a-form-item>
            <a-form-item label='路由与否'  :label-col="formitem.LabeCol"  :wrapper-col='formitem.WrapperCol'>
                <a-radio-group  v-decorator="['isRouter',baseInit.isRouter]">
                  <a-radio value="1">是</a-radio>
                  <a-radio value="0">否</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label='路由代码'  :label-col="formitem.LabeCol"  :wrapper-col='formitem.WrapperCol'>
                  <a-textarea  rows='10'  v-decorator="['routerCode',baseInit.routerCode]"/>
            </a-form-item>
        </a-col>
        <a-col  :span='12'>
            <a-form-item label='图标'  :label-col="formitem.LabeCol"  :wrapper-col='formitem.WrapperCol'>
                <a-input    v-decorator="['icon',baseInit.icon]"/>
            </a-form-item>
            <a-form-item label='权限代码'   :label-col="formitem.LabeCol"  :wrapper-col='formitem.WrapperCol' >
                <a-input    v-decorator="['permissionCode',baseInit.permissionCode]"/>
            </a-form-item>
            <a-form-item label='标题'  :label-col="formitem.LabeCol"  :wrapper-col='formitem.WrapperCol'>
                <a-input    v-decorator="['title',baseInit.title]"/>
            </a-form-item>
            <a-form-item label='url' :label-col="formitem.LabeCol"  :wrapper-col='formitem.WrapperCol'>
                <a-input    v-decorator="['url',baseInit.url]"/>
            </a-form-item>
            <a-form-item label='status'  :label-col="formitem.LabeCol"  :wrapper-col='formitem.WrapperCol'>
                <a-input    v-decorator="['status',baseInit.status]"/>
            </a-form-item>
        </a-col>
        <a-form-item  style='display: none;' >
            <a-input    v-decorator="['code' , baseInit.code]"/>
        </a-form-item>
      </a-form>
    </a-row>
    </a-modal>
</template>

<script>

  import  {  submitAddMenu,MenuDetail  }  from  '@/api/system/jurisdiction'
export default {
  name: 'jurisdiction',
  props:{
      visible:{
        type:Boolean,
        default:false
      },
      parentMenu:{
        type:Array,
        default:[]
      }
  },
  data () {
    return {
      modalProps:{
          title:'权限',
          isEdit:false, /*表单进入状态*/
      },
      
      formitem:{
        LabeCol:{span:6},
        WrapperCol:{span:16},
      },
      /*form 初始值*/
      baseInit:{
        code:{initialValue:''},/*隐藏input里加上code*/

        parentId:{initialValue:''},
        name:{ initialValue :'' , rules : [{ required : true , message : '请输入名称' }]},
        sort:{ initialValue :'' },
        isMenu:{initialValue:''},
        isRouter:{initialValue:''},
        routerCode:{initialValue:''},

        icon:{initialValue:''},
        permissionCode:{initialValue:''},
        title:{initialValue:''},
        url:{initialValue:''},
        status:{initialValue:''},

      },
      /*等待动作*/
      confirmLoading: false,

      //option
      plainOptions:[], 
                                                                                      
    }
  },
  created(){

  },
  methods:{

     handleCancel(e) {
      this.$emit('handleCancel')
      // this.visible = false
    },
    //submit
    handleOk(e) {
      let that = this
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);

            this.confirmLoading = true;
            let url 
            if(that.modalProps.isEdit == false){
                url ='/sys/menu/create_menu' //新增 菜单
            }
            else{
              url = '/sys/menu/modify_menu' //修改 菜单
            }
            submitAddMenu(url,values).then((res)=>{
              that.confirmLoading = false;
              that.$message.success(res.data.msg)
              that.$emit('handleOk')
            })
            .catch((err)=>{
              that.confirmLoading = false;
            })
          }
          else{
            console.log(err)
          }
        });
    },
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
  },
  mounted(){
    this.$nextTick(()=>{
      this.$on('openDialog',function(id){
        this.modalProps.isEdit = false
        this.modalProps.title = '添加角色'
        /*清空表单输入和校验*/
        this.form.resetFields()
        /*设置默认值*/
        this.baseInit.code.initialValue = ''

        this.baseInit.parentId.initialValue = id
        this.baseInit.name.initialValue = ''
        this.baseInit.sort.initialValue = ''
        this.baseInit.isMenu.initialValue = ''
        this.baseInit.isRouter.initialValue = ''
        this.baseInit.routerCode.initialValue = ''


        this.baseInit.icon.initialValue = ''
        this.baseInit.permissionCode.initialValue = ''
        this.baseInit.title.initialValue = ''
        this.baseInit.url.initialValue = ''
        this.baseInit.status.initialValue = ''
      })
      this.$on('editDialog',async function(code){
        this.modalProps.isEdit = true
        this.modalProps.title = '编辑权限'
        /*清空表单输入和校验*/
        this.form.resetFields()
        /*设置默认值*/
        this.baseInit.code.initialValue = code
        await MenuDetail(code).then((res)=>{
          let data = res.data.data
          // console.log(res.data)
            this.baseInit.parentId.initialValue = data.parentId
            this.baseInit.name.initialValue = data.name
            this.baseInit.sort.initialValue = data.sort
            this.baseInit.isMenu.initialValue = data.isMenu
            this.baseInit.isRouter.initialValue = data.isRouter
            this.baseInit.routerCode.initialValue = data.routerCode


            this.baseInit.icon.initialValue = data.icon
            this.baseInit.permissionCode.initialValue = data.permissionCode
            this.baseInit.title.initialValue = data.title
            this.baseInit.url.initialValue = data.url
            this.baseInit.status.initialValue = data.status

        })
        
        
      })
    })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
